<template>
	<view class="help-wrap">
		<view class="padding30" v-if="info.isLottery">
			<text class="mc-f16">助力详情</text>
			<view class="margin-top36 mc-space-between mc-flex-vcenter mc-f12">
				<text>此次抽奖您一共获得了 <text class="mc-red margin-left10 margin-right10">{{list.length+1}}</text> 个幸运码 </text>
				<view class="mc-flex-vcenter" @tap="toCode">
					<text>查看幸运码</text>
					<image src="../../../static/images/right-arrow.png" mode="aspectFit" style="width: 33rpx;height: 33rpx;"></image>
				</view>
			</view>
		</view>
		<block v-else>
			<view class="help-top mc-space-between mc-flex-vcenter">
				<view>
					<view class="mc-flex-vcenter">
						<text class="mc-f16">朋友助力</text>
						<form @submit="setFormId" report-submit="true">
							<button form-type="submit" @tap="popShow('CDrawRule')" class="formId-btn mc-flex-vcenter formId-btn">
								<image src="../../../static/images/ui_wenhao.png" mode="aspectFit" style="width: 33rpx;height: 33rpx;margin-left: 20rpx;"></image>
							</button>
						</form>
					</view>
					<view class="mc-f12 margin-top10" style="color: #d6d6d6;">邀请朋友助力增加幸运码提高中奖率</view>
				</view>
				<form @submit="setFormId" report-submit="true">
					<button form-type="submit" type="primary" open-type="share" class="share-btn" hover-class="none">邀请助力</button>
				</form>
			</view>
			<view class="help-bottom">
				<view class="mc-flex-vcenter mc-space-between">
					<button open-type="share" class="help-share-item" v-for="(item,index) in 5" :key="index">
						<image :src="list[index].photo" mode="aspectFill" v-if="list[index].photo"></image>
						<image src="../../../static/images/ui_touxiang.png" mode="aspectFill" v-else></image>
						<!-- <view class="mc-g8 mc-f10 ellipsis">待邀请</view> -->
					</button>
				</view>
				<view class="margin-top36 mc-space-between mc-flex-vcenter mc-f12">
					<text>目前已有 <text class="mc-red margin-left10 margin-right10">{{list.length}}</text> 位朋友为您助力 </text>
					<form @submit="setFormId" report-submit="true">
						<button form-type="submit" class="mc-flex-vcenter formId-btn" @tap="toCode">
							<text>查看幸运码</text>
							<image src="../../../static/images/right-arrow.png" mode="aspectFit" style="width: 33rpx;height: 33rpx;"></image>
						</button>
					</form>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	export default {
		props: {
			info: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				list: [],
				myCode: {}
			}
		},
		computed: {

		},
		methods: {
			...mapActions('pop', ['popShow']),
			...mapActions('draw', ['luckyCodeListUp']),
			// 抽奖幸运码列表
			async getDrawCodeList() {
				let res = await this.$api.draw.getDrawCodeList({
					prizeId: this.info.prizeId
				}) || {}
				console.log('getDrawCodeList', res)
				this.list = res.list || [];
				this.myCode = res.myWeightDto || {};

				const list = this.list.slice()
				list.unshift(this.myCode)
				console.log('list', list)
				this.luckyCodeListUp(list)
			},
			toCode() {
				uni.navigateTo({
					url: '/pages/draw/luckyCode/luckyCode'
				})
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e) {
				this.$store.dispatch('common/formIdListUp', {
					e: e,
					isSave: true
				})
			},
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
	.help-wrap {
		position: relative;
		width: 690rpx;
		margin: 30rpx auto;
		z-index: 9;
		background-color: #2e2c83;
		border-radius: 10rpx;
		color: white;

		.help-top {
			position: relative;
			padding: 30rpx;

			&:before {
				content: ' ';
				position: absolute;
				bottom: 0;
				left: 30rpx;
				right: 30rpx;
				border-bottom: 1px solid #e5e5e5;
				opacity: 0.3;
			}
		}

		.share-btn {
			background-color: #e35a2e;
			font-size: 30rpx;
			margin: 0;
			border-radius: 1000px;
			animation: btn 1.5s infinite;
		}

		@keyframes btn {
			0% {
				transform: scale(1);
			}

			30% {
				transform: scale(0.9);
			}

			100% {
				transform: scale(1);
			}
		}

		.help-bottom {
			padding: 30rpx;
		}

		.help-share-item {
			padding: 0;
			margin: 0;
			width: 90rpx;
			height: 90rpx;
			background-color: #695cf4;
			border-radius: 1000px;
			overflow: hidden;

			image {
				display: block;
				width: 100%;
				height: 100%;
				margin: 0;
			}
		}
	}

	.partake:before {
		content: '观看视频广告，参与抽奖';
		position: absolute;
		top: -2em;
		left: 50%;
		width: 360rpx;
		margin-left: -180rpx;
		height: 2.5em;
		line-height: 2.5em;
		text-align: center;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #e35a2e;
		background-color: white;
		box-shadow: 1px 1px 1px #E5E5E5;
		z-index: 99;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		margin-right: 10rpx;
	}
</style>
